<template>
    <div id="syncDownload" class="align-center" ref="syncDownload">
        <!-- <div v-if="!loadingLessonSet.some(item=>item.id === lessonId)" class="align-center"> -->
        <div class="align-center">
            <div class="progress-con">
                <!-- <el-progress class="down-btn" :stroke-width="26" :max="100" :show-text="false" :color="'#fff'"
                    :percentage="currentLesson.progress.progressVal"></el-progress> -->
                <div style="z-index:9999!important" class="d-bg">
                    {{btnContent.title}}
                </div>
            </div>
            <div class="animation s-12" ref="animation">
                <img src="../../../assets/img/home/download-tips.png" alt="">
            </div>
            <span class="t-color-n s-16">{{btnContent.tips}}</span>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import bus from '../../../assets/js/bus.js'
export default {
    inject: ["pushOneLessonToCenter", "changeDownloadStatus", "cancelShadeStatus"],
    props: ["downloadStatus", "lessonId"],
    data () {
        return {
            click: false,
            currentLesson: {
                progress: {
                    progressVal: 0
                }
            },
            btnContent: {
                title: '正在下载',
            },
        }
    },
    computed: {
        ...mapState({
            cloudprogressVal: state => state.cloudprogressVal,
        })
    },
    mounted () {
        this.setProgress(0)
        // let _this = this
        // bus.$emit('progressCallbackVal',(val)=>{
        //     _this.setProgress(val)
        // })     
    },
    watch: {
        'cloudprogressVal' (val) {
            console.log('progressCallbackVal-------------------------------',val);
            this.setProgress(val)
        }
    },
    methods: {
        setProgress (val) {
            const dowloadRef = this.$refs.syncDownload
            if (dowloadRef) {
                dowloadRef.style.setProperty('--position', `${val}%`)
            }
        }
    }
}
</script>

<style lang="scss">
#syncDownload {
    width: 100vw;
    // height: calc(100vh - 155px);
    position: absolute;
    background-image: url(./img/download-mask.png);
    background-size: cover;
    z-index: 19;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    .progress-con {
        position: absolute;
        bottom: 116px;
        left: 50%;
        width: 224px;
        height: 59px;
        line-height: 59px;
        margin-left: 28px;
        background-image: url("./img/d-bg-i.png");
        background-size: cover;
        color: #fff;
        font-size: 22px;
        text-align: center;
        cursor: pointer;
        .d-bg {
            cursor: pointer;
            position: absolute;
            background-image: url("./img/d-bg.png");
            background-repeat: no-repeat;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-size: var(--position) 100%;
            border-radius: 32px;
        }
    }
    .down-btn::-webkit-progress-bar {
        background-color: rgba(#000, 0.4);
    }
    .down-btn::-webkit-progress-value {
        background: #0085ff;
    }
}
</style>
